<template>
  <div class="checkCode">
    <van-icon
      name="music-o"
      size="30vw"
      color="rgb(219, 65, 65)"
      style="padding: 10vw 0;"
    />
    <div class="tip">
      你的手机号：+86
      <span>{{ $route.query.phoneNumber | toPrivacy }}</span>
      <br />
      将会收到一条带有验证码的短信：请输入验证码
    </div>
    <van-password-input
      :value="value"
      info="验证码为 4 位数字"
      :mask="false"
      length="4"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
    <van-button type="default" round>重新发送</van-button>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  filters: {
    toPrivacy(value) {
      return value
        .split("")
        .map((item, index) => {
          if (index > 2 && index < 7) {
            return "*";
          } else {
            return item;
          }
        })
        .join("");
    },
  },
  data() {
    return {
      value: "",
      errorInfo: "",
      showKeyboard: true,
    };
  },
  watch: {
    value(value) {
      /* axios
        .get(
          "https://autumnfish.cn/captcha/verify?phone=" +
            this.$route.query.phoneNumber +
            "&captcha=" +
            this.value
        )
        .then((res) => {
          console.log(res);
        }); */
      if (value.length === 4 && value !== "1234") {
        this.errorInfo = "验证码错误";
      } else if (value === "1234") {
        console.log("注册完成");
      } else {
        this.errorInfo = "";
      }
    },
  },
};
</script>

<style scoped>
.checkCode {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.checkCode .tip {
  width: 60vw;
  font-size: 12px;
  color: #aaa;
  margin: 10px 0;
}
.checkCode .van-password-input {
  width: 60vw;
}
.checkCode .van-button {
  margin-top: 20px;
}
</style>
